<template>
  <div class="bg">
    <nav-com title="申请退货退款" :showView='showView' @back="backHandler()"></nav-com>
    <div style="background-color: white; margin: 10px 15px;border-radius: 10px;;line-height: 40px;">
      <div style="display:flex;border-bottom: 1px solid #DCDCDC;padding-left: 10px">
        退款金额<div style="color:red">*</div>
      </div>
      <div style="padding:10px">
        <div style="display:flex;justify-content: space-between;">
          <div style="color:#FE4B20;font-size: 18px;font-weight: bold;">￥{{returnForm.money}}</div>
          <!-- <div style="color:#808080;font-size:12px" @click="editMoney">修改</div> -->
        </div>
        <div style="color:#808080;font-size:12px;line-height: 20px;">可修改，最多￥{{returnForm.money}}，含发货邮费￥0.00</div>
      </div>
    </div>

    <div style="background-color: white; margin: 10px 15px;border-radius: 10px;;line-height: 40px;padding-bottom: 5px;">
      <div  style="display:flex;border-bottom: 1px solid #DCDCDC;padding-left: 10px">
        补充描述和凭证><span style="color:red">*</span>
      </div>
      <div style="background-color: rgb(247, 247, 247);margin: 5px 10px; border-radius: 10px;">
        <div>
          <van-cell-group>
            <van-field v-model="returnForm.refund_content"   type="textarea" placeholder="补充描述，有助于商家更好的处理售后问题"   maxlength="200"

                       show-word-limit/>
          </van-cell-group>
        </div>
        <div style="padding:10px">
          <van-uploader :image-fit="contain" :preview-size="[80, 80]"	multiple :preview-imag="false" v-model="fileList" max-count="3" upload-text="3张凭证" :after-read="afterRead" />
        </div>
      </div>
    </div>
    <div @click="submit" style="color: #FFFFFF;margin:0 auto;text-align: center;width: 300px;line-height: 50px;background: #FE4B20;border-radius: 50px;margin-top: 50px;">提交</div>
    <van-dialog v-model="show">
      <div style="padding:20px">
        <van-field v-model="returnForm.money" type="digit" placeholder="输入金额" confirmButtonColor="#FE4B20"/>
      </div>
    </van-dialog>
  </div>

</template>
<script>
import { postImages5G,myShopaddApply} from '@/api/api'
import navCom from '@/component/nav'
import { Field } from 'vant';
import { Uploader } from 'vant';
import { Dialog } from 'vant';
import {Toast} from "vant";

export default {
  name:'orders',
  components:{
    navCom
  },
  data() {
    return {
      show:false,
      id:"",
      fileList: [],
      returnForm:{
        "money":"",
        "goods":"",
        "order_id":"",
        "refund_content":"",
        "images":[],
        "expressType":'0',
        "type":'0',
        "order_type":'goods',
        "token5g":localStorage.getItem("token5g")
      }
    }
  },
  filters: {
    /*
          时间格式自定义 只需把字符串里面的改成自己所需的格式
          */
    formatDateTime:function(date) {
      var date = new Date(date*1000);
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var Hours = date.getHours();
      if (Hours >= 0 && Hours <= 9) {
        Hours = "0" + Hours;
      }
      var Minutes = date.getMinutes();
      if (Minutes >= 0 && Minutes <= 9) {
        Minutes = "0" + Minutes;
      }
      var Seconds = date.getSeconds();
      if (Seconds >= 0 && Seconds <= 9) {
        Seconds = "0" + Seconds;
      }
      var currentDate = date.getFullYear() + "-" + month + "-" + strDate
          + " " + Hours + ":" + Minutes + ":" + Seconds;
      return currentDate;
    }

  },

  mounted(){
    console.log( this.$route.params);
    this.returnForm.order_id=this.$route.params.id
    this.returnForm.goods=this.$route.params.goods_id
    this.returnForm.money=this.$route.params.money
    this.returnForm.images = []
  },
  methods:{
    //返回
    backHandler(){
      this.$router.go(-1)
    },
    editMoney(){
      this.show=true
    },
    //初始化
    init(){
      // this.getDataHanlder("range")
    },
    //获取数据
    submit(){
      console.log(this.returnForm);
      if(this.returnForm.images.length==0){
        this.$dialog.alert({
          message:"请上传凭证"
        })
        return;
      }
      if(this.returnForm.refund_content==""){
        this.$dialog.alert({
          message:"请填写描述"
        })
        return;
      }
      this.returnForm.reason = this.returnForm.refund_content
      myShopaddApply(this.returnForm).then(res=>{
        console.log("orderAftersale",res);
        Toast(res.data.msg);
        if(res.data.code==1){
          this.$router.go(-1)
        }else {

        }
      })
    },
    afterRead(file) {
      var that=this;
      console.log(file);
      file.status = 'uploading';
      file.message = '上传中...';
      var data = new FormData()
      data.append('file',file.file)
      postImages5G(data).then(res=>{
        if(res.data.code=1){
          file.status = 'done';
          file.message = '';
          that.returnForm.images.push(res.data.data.fullurl)

        }else{
          file.status = 'failed';
          file.message = '上传失败';
        }
        console.log(res);

      })
    },
  }
}
</script>
<style scoped>
.bg{
  height: 100vh;
  background-color: #f2f3f7;
}
.van-cell-group {
  background-color:#f7f7f7;
}
.van-cell {
  font-size: 10px!important;
  background-color:#f7f7f7;
  border: 0 solid #f7f7f7;

}
.van-cell ::after {
  border: 0 solid #f7f7f7;
}
.van-uploader__upload-text {
  /* margin-top: 8px; */
  color: #969799;
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
<style>
.van-uploader__upload {
  border: 1px solid #E0E0E0!important;
}
.van-uploader__upload-text {
  margin-top: 0px!important;
}
.van-image__img{
  width: 80px!important;
  height: 80px!important;
}
.van-uploader__preview-image{
  width: 80px!important;
  height: 80px!important;
}

</style>
